<!DOCTYPE html>

{include file='head_hooks.html'}

<head>

  <title>Alta de Remito</title>

  {include file='head_scripts.html'}

  <script type="text/javascript">

    INITIAL_ITEMS = 1;

    items = '0';
    function agregarItem() {
      items++;
      node  = '<section class="row">';
      node += '<div class="span2 pagination-centered">';
      node += '<input class="span2 ean13" id="codigo-'+(items)+'" name="codigo-'+(items)+'" type="text" required="required" />';
      node += '</div>';
      node += '<div class="span4 pagination-centered">';
      node += '<span id="descripcion-'+(items)+'" class="input span4 uneditable-input"></span>';
      node += '</div>';
      node += '<div class="span2 pagination-centered">';
      node += '<div class="input-append" id="medida-'+(items)+'">';
      node += '<input class="input-small" name="cantidad-'+(items)+'" type="text" />';
      node += '<span class="add-on"></span>';
      node += '</div>';
      node += '</div>';
      node += '<div class="span1 pagination-centered">';
      node += '<input class="span1" name="lote-'+(items)+'" id="lote-'+(items)+'" type="text" />';
      node += '</div>';
      node += '<div class="span2 pagination-centered">';
      node += '<input class="span2" name="vencimiento-'+(items)+'" id="vencimiento-'+(items)+'" type="text" placeholder="AAAA/MM/DD" />';
      node += '</div>';
      node += '<div class="span1">';
      node += '<a class="btn btn-danger disabled"><i class="icon-minus-sign icon-white"></i></a>';
      node += '</div>';
      node += '</section>';
      $('#btnAgregar').before(node);
      $("#descripcion-"+items).hide();
      $("#medida-"+items).hide();
      $("#vencimiento-"+items).hide();
      $("#lote-"+items).hide();
    }

    $(document).ready(function(){

        for (var i = 1; i <= INITIAL_ITEMS; i++) {
          agregarItem();
          $("#descripcion-"+i).hide();
          $("#medida-"+i).hide();
          $("#vencimiento-"+i).hide();
          $("#lote-"+i).hide();
        };

        $(".ean13").live("change", function(e){
          var item = e.target.id.split('-').pop();

          $("#descripcion-"+item).hide();
          $("#medida-"+item).hide();
          $("#vencimiento-"+item).hide();
          $("#lote-"+item).hide();

          $.getJSON("/sgc/productos/detalle/" + $("#codigo-"+item).val(),
            function(data){
              $.each(data, function(i,response){
              if (response.field == "descripcion" && response.value != null) {
                $("#descripcion-"+item).text(response.value);
                $("#descripcion-"+item).show();
              } else if (response.field == "medida" && response.value != null) {
                $("#medida-"+item+" .add-on").text(response.value);
                $("#medida-"+item).show();
                $("#medida-"+item+" input").focus();
              } else if (response.field == "loteable" && response.value != null) {
                if (response.value == 1){
                  $("#lote-"+item).show();
                  $("#vencimiento-"+item).show();
                }
                else {
                  $("#lote-"+item).hide();
                  $("#vencimiento-"+item).hide();
                }
              }
            });
          });

        });
    });
  </script>

<style>
  body {
    background-color:#dfe9eb;
  }
</style>

</head>

<body>

  {include file='body_hooks.html'}

  <div class="container">
    <section class="row pagination-centered">
      <h1>Alta de Remito</h1>
    </section>
    <!-- row -->

   
        
        <form action="/sgc/remitos/save/" method="POST" enctype="multipart/form-data" class="form">

          <fieldset>
            <section class="row">
            <div class="span3">
              <label>Seleccione Empleado</label>
              <select name="usuario" class="span3">
                {foreach from=$usuarios item=usuario}
                <option value="{$usuario->id}">{$usuario->nombre}</option>
                {/foreach}
              </select>
            </div>
              <div class="span3">
              <label>Seleccione Almacen</label>
              <select name="almacen" class="span3">
                {foreach from=$almacenes item=almacen}
                <option value="{$almacen->id}">{$almacen->descripcion}</option>
                {/foreach}
              </select>
            </div>
            <div class="span3">
              <label>Seleccione Proveedor</label>
              <select name="proveedor" class="span3">
                {foreach from=$proveedores item=proveedor}
                <option value="{$proveedor->id}">{$proveedor->nombre}</option>
                {/foreach}
              </select>
            </div>
            <div class="span3">
              <label>&nbsp;</label>
              <div class="input-prepend">
                <span class="add-on">Nº</span>
                <input class="span2" name="numero" type="text" placeholder="Número Remito" required="required" />
              </div>
            </div>
            </section>
          </fieldset>
                        
          <fieldset>
            <legend>Detalle</legend>
            
            <section class="row">
              <div class="span2 pagination-centered">EAN-13 / código</div>
              <div class="span4 pagination-centered">Descripción</div>
              <div class="span2 pagination-centered">Cantidad</div>
              <div class="span1 pagination-centered">Lote</div>
              <div class="span2 pagination-centered">Vencimiento</div>
              <div class="span1 pagination-centered">Acción</div>
            </section>

            <section id="btnAgregar" class="row pagination-centered">
              <a class="btn btn-success btn-large span2 offset2" onclick="agregarItem()"><i class="icon-plus-sign icon-white"></i></a>
              <button type="submit" class="btn btn-primary btn-large span2 offset3">Guardar</button> 
            </section>

          </fieldset>

        </form>

    {include file='footer.html'}

  </div> <!-- /container -->

  {include file='footer_scripts.html'}

</body>

</html>